<template>
  <div>
    <el-upload
      class="updispck"
      action="#"
      :limit="limit"
      list-type="picture-card"
      :on-preview="handlePictureCardPreview"
      :before-upload="beforeupload"
      :http-request="httpRequest"
      :on-success="onSuccess"
      :on-remove="onRemove"
      :file-list="fileList"
      :class="{disabled: fileList.length === limit}"
    >
      <i class="el-icon-plus" />
    </el-upload>
    <el-dialog :visible.sync="dialogVisible" :append-to-body="true">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
  </div>
</template>
<script>
import { Upimage } from '@/api/device/device'
import { URL } from '@/utils/rootURL'
export default {
  props: {
    imgesAll: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      dialogImageUrl: '',
      dialogVisible: false,
      fileList: [],
      // 暂存区
      //   staging: '',
      // 上传开关
      showPercent: false,
      limit: 3
    }
  },
  computed: {},
  watch: {
    imgesAll: {
      handler(val) {
        if (!val) return
        this.fileList = val.split(',').map(item => {
          return { url: URL + item }
        })
      },
      immediate: true
    }
  },
  methods: {
    // 移除区
    onRemove(result) {
    //   console.log(result)
      this.fileList = this.fileList.filter((item) => result.url !== item.url)
    },
    // 上传之前
    beforeupload(file) {
      // 判断是否上传成功的开关
      this.showPercent = true
    },
    // 上传成功触发
    onSuccess(result, fileList) {
      console.log(result)
      this.fileList.push(fileList)
      this.showPercent = false
    },
    // 手动上传
    async httpRequest(reslut) {
      //   if (this.showPercent) return
      const fd = new FormData()
      fd.append('file', reslut.file)
      const res = await Upimage(fd)
      // console.log(res)
      if (res.data.data) {
        return { url: URL + res.data.data.url, updated: true }
      }
    },
    // 预览区
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep .updispck {
  .el-upload--picture-card {
    width: 100px;
    height: 100px;
    line-height: 100px;
  }
  .el-upload-list__item {
    width: 100px;
    height: 100px;
    // line-height: 100px;
  }
}
::v-deep .disabled .el-upload--picture-card{
  display: none;
}

 ::v-deep .el-dialog{
    width: 520px;
  }
</style>
